<template>
  <div>
    <comment-header></comment-header>
    <div class="content">
      <h2 v-text="contentList.name"></h2>
      <span v-text="'分类 : '+contentList.service_tags"></span>
      <p v-text="'地址 : '+contentList.formatted_address"></p>
      <p v-text="'电话 : '+contentList.phone"></p>
      <span>更多信息</span>
      <p>{{'周&#X3000;&#X3000;边 : '+contentList.surround}}</p>
      <p v-text="'营业时间 : '+contentList.business_hour"></p>
      <div class="phone" >拨打电话</div>
    </div>
   
    <div class="middle">
      <p>关于宠物秀</p>
    </div>
    <div class="Bottom">
    <div class="Bottom_box">
       <div class="Bottom_left">
        <img src="../../../static/image/footdon.png" >
     </div>
      <div>
        <span>
        一起Show我们的爱宠吧！宠物秀是图片配文字、涂鸦、COSPLAY的移动手机社区，
        这里有猫狗鱼龟兔子仓鼠龙猫等各种萌图。
      </span>
      </div>
    </div>
    <div class="Bottom_button">
        <a  href="https://a.app.qq.com/o/simple.jsp?pkgname=com.staffy.pet">App store</a>
        <a  href="https://a.app.qq.com/o/simple.jsp?pkgname=com.staffy.pet">Android</a>
        <div></div>
    </div>
    </div>
    <div class="last_bottom">
      Copyright(c)2015 PetShow All Rights Reserved
    </div>
  </div>

</template>

<script>
import commentHeader from "../../components/comment/commentHeader";

export default {
  components: {
    commentHeader
  },
  data() {
    return {
      contentList: ""
    };
  },
  mounted() {
    this.contentList = JSON.parse(window.localStorage.getItem("hairdinItem"));
  },
};
</script>

<style scoped>
*{
    box-sizing: border-box;
}
.content{
    background: #ffffff;
    padding:3vw 5vw 10vw 5vw;
  
}
.content h2{
    font-weight: normal;
}
.content span{
    color: #999999;
    font-size: 3.2vw;
}
.content p{
    font-size: 3.6vw;
}
.phone{
    width: 80vw;
    height: 10vw;
    line-height: 10vw;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
    border-radius: 10vw;
    background: #31842A;
}
.middle{
    width: 100%;
    font-size: 15px;
    color: #b2b2b2;
    padding: 0 16px 15px;
}
.Bottom{
    background-color: white;
    width: 99%;
    margin: 0 auto;
    color: #b2b2b2;
    font-size: 12px;
   
    padding: 23px 16px;
}
.Bottom_box{
 display: flex;
    justify-content: space-between;
}
.Bottom_left{
  margin-right: 2vw;
}
.Bottom_left>img{
  width: 35px;
  height: 35px;
}
.Bottom_button{
margin-top: 3vw;
margin-bottom: 3vw;
height: 5vw;
}
.Bottom_button a{
display: inline-block;
    text-align: center;
    border: 1px solid #b9b8b8;
    color: #b9b8b8;
    border-radius: 10px;
    width: 85px;
    line-height: 19px;
    height: 21px;
    float: right;
}

.last_bottom{
      text-align: center;
    font-size: 12px;
    color: #b9b8b8;
    height: 30px;
    line-height: 30px;
    margin: 17px;
}
/* .Bottom_button a:only-child(1){
  color: red;
  border:1px solid red;
} */
/* a:nth-child(1):hover{
  color: green;
  border:1px solid green;
} */
</style>